<body>
<!-- 模态框拖拽 -->
<!-- 弹出的框，也叫模态框 -->
<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<div id="login" class="login">
    <div id="title" class="login-title">登录会员
    <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
    <div class="login-input">
    <label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username">
    </div>
    <div class="login-input">
    <label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password">
    </div>
    </div>
    <div id="loginBtn" class="login-button">
    <a href="javascript:void（0）；" id="login-button-submit"></a>
    </div>
    </div>
    <!--遮盖层-->
    <div id="bg" class="login-bg"></div>
    <script>
//1.获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
//2.点击弹出层这个链接 link 让mask和login 显示出来
link.addEventListener('click', function() {
    mask.style.display = 'block';
    login.style.display = 'block';
})
//3.点击closeBtn 就隐藏mask和login
closeBtn.addEventListener('click', function() {
    mask.style.display = 'none';
    login.style.display = 'none';
})
//4.开始拖拽
// （1）鼠标按下，能获得鼠标在盒子里的坐标
title.addEventListener('mousedown', function(e) {
    var x = e.pageX - login.offsetLeft;
    var y = e.pageY - login.offsetTop;
    //（2）鼠标移动的时候，把鼠标在2页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
    document.addEventListener('mousemove', move)

    function move(e) {
        login.style.left = e.pageX - x + 'px';
        login.style.top = e.pageY - y + 'px';

    }
    //(3)鼠标弹起，就让鼠标事件移除
    document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove',move );
    })
})
</script>



</body>